<template>
  <div class="com-field-table-list">
    <div v-if="!head.readonly">
      <button @click="add_new()" class="btn btn-default btn-xs" v-if="head.can_create!=undefined?head.can_create:true">
        <i style="color: green" class="fa fa-plus-circle"></i>
      </button>
      <button @click="delete_rows()" :disabled="selected.length==0" class="btn btn-default btn-xs" v-if="head.can_delete!=undefined?head.can_delete:true">
        <i style="color: red" class="fa fa-minus-circle"></i>
      </button>
      <div style="display: inline-block;position: relative;vertical-align: top">
        <textarea :name="head.name" v-model="row[head.name]"  style="display: none"></textarea>
      </div>
    </div>
    <el-table ref="core_table" class="table"
              :data="rows"
              border
              :stripe="true"
              size="mini"
              :fit="false"
              @header-dragend="on_header_dragend"
              @selection-change="handleSelectionChange"
              style="width: 100%">
      <!--:summary-method="getSum"-->
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>

      <template  v-for="col in normed_heads">

        <el-table-column v-if="col.editor"
                         :show-overflow-tooltip="is_show_tooltip(col) "
                         :label="col.label"
                         :prop="col.name.toString()"
                         :width="col.width">
          <template slot-scope="scope">
            <component :is="col.editor"
                       @on-custom-comp="on_td_event($event)"
                       :row-data="scope.row" :field="col.name" :index="scope.$index">
            </component>

          </template>

        </el-table-column>
        <el-table-column v-else
                         :show-overflow-tooltip="is_show_tooltip(col) "
                         :prop="col.name.toString()"
                         :label="col.label"
                         :width="col.width">
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
export default {
  props:['row','head'],
  mixins:[mix_table_data,mix_ele_table_adapter],
  data:function(){
    if(this.row[this.head.name]){
      var value = this.row[this.head.name]
      if(typeof(value) =='string'){
        var rows = JSON.parse(value)
      }else{
        var rows = value
      }
    }else{
      var rows = []
    }

    var self = this
    return {
      rows:rows,
      row_sort:{},
      heads:this.head.table_heads,
      selected:[],
      parStore:ex.vueParStore(this),
      childStore:{name:'com-field-table-list',vc:self},
    }

  },

  mounted:function(){
//var self=this
//ex.assign(this.op_funs, {
//        edit_over: function () {
//            self.row[self.head.name] = JSON.stringify(self.rows)
//        },
//    }
//)
//this.$on('commit',this.on_commit)
    if(this.head.mounted_express){
      ex.eval(this.head.mounted_express,{vc:this,row:this.row,head:this.head})
    }
    this.loadAdviseInfo()
  },
  computed:{
    out_row_this_field:function(){
      return this.row[this.head.name]
    },
    normed_heads(){
      return ex.filter(this.heads,head=>{
        if(head.show_express){
          return ex.eval(head.show_express,{row:this.row,vc:this})
        }else{
          return  true
        }
      })
    }
  },
  watch:{
    out_row_this_field:function(){
      if(this.row[this.head.name]){
        if(typeof this.row[this.head.name] =='string'){
          this.rows = JSON.parse(this.row[this.head.name])
        }else{
          this.rows = this.row[this.head.name]
        }

      }else{
        this.rows = []
      }
    },
    rows:{
      handler: function(v){
        if(v.length>0){
          Vue.set(this.row,this.head.name,JSON.stringify(v))
//this.row[this.head.name] = JSON.stringify(v)
        }else{
          Vue.set(this.row,this.head.name,"[]")
//this.row[this.head.name] = ''
        }
      },
      deep: true
    },
  },


  methods:{
    on_header_dragend(newWidth, oldWidth, column, event){
      // if(this.advise_heads.length >0){
      if(this.head.layout_key){
        var key = '_table_settings_'+this.head.layout_key
        var setting_str = localStorage.getItem(key) || '{}'
        var setting_obj = JSON.parse(setting_str)
        setting_obj.advise_width = setting_obj.advise_width || {}
        setting_obj.advise_width[column.property] = newWidth
        localStorage.setItem(key,JSON.stringify(setting_obj))

      }
    },
    loadAdviseInfo(){
      if(this.head.layout_key){
        var key = '_table_settings_'+this.head.layout_key
        var setting_str = localStorage.getItem(key) || '{}'
        var setting_obj = JSON.parse(setting_str)
        var advise_width =  setting_obj.advise_width
        ex.each(this.heads,(head)=>{
          if( advise_width[head.name]){
            head.width = advise_width[head.name]
          }
        })
      }
    },
    commit:function(){
      var self=this
      self.row[self.head.name] = JSON.stringify(self.rows)
    },
    add_new:function(){
      var self = this
      self.crt_row = {}
      if(self.head.preset_express){
        var preset = ex.eval(self.head.preset_express,{head:self.head,par_row:this.row})
      }else{
        var preset = {}
      }
      if(this.head.fields_ctx){
        var fields_ctx = this.head.fields_ctx
        Object.assign(fields_ctx,{
          genVc:self,
          par_row:self.row,
          preset:preset,
        })
      }else{ // 这里是兼顾老的
        var fields_ctx={
          heads:self.head.fields_heads,
          ops_loc:'bottom',
          save_express:'scope.vc.$emit("finish",scope.vc.row);rt=Promise.resolve(scope.vc.row)',
          ops:[{
            'name':'save','editor':'com-field-op-btn','label':'确定', 'icon': 'fa-save',
          }],
          genVc:self,
          par_row:self.row,
          preset:preset,
        }
      }

      cfg.pop_vue_com('com-form-one',fields_ctx).then((row)=>{
        if(row){
          self.rows.push(row)
        }else{
          console.log('break form one')
        }
        if(self.head.after_save_express){
          ex.eval(self.head.after_save_express,{row:row,vc:self})
        }
      })
    },
    delete_rows:function(){
      var self=this
      layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
//do something
        ex.remove(self.rows,function(row){
          return self.selected.indexOf(row )!=-1
        })
        layer.close(index);
      });
//alert(this.selected.length)
    },
    norm_head:function(head,row){
      if(row._editing){

      }
    }
  }

}
</script>
